<template>
  <div class="total" v-loading="loading">
      <div class="bgimg">
          <!-- <img :src="imgSrc"  alt=""> -->
          <img src="@/assets/img/teacher1.jpg"  alt="">

      </div>
      <div class="box">
            <div class="content1">
                <img src="@/assets/img/teacher.jpg" alt="">
            </div>
            <div v-for="(item,index) in infomation" :key="index" class="info">
                <img :src="item.avatar" alt="touxiang" ref="imgHeight"/>
                <div class="box1">
                    <div>{{item.name}}</div>
                    <div class="person">的个人主页</div>
                </div>
                <div class="base_infomation">
                    <div class="base">基本信息 The basic information</div>
                    <div class="base_1">
                        <div class="base_11">姓名:<span>{{item.name}}</span></div>
                        <div class="base_11">学院:<span>{{item.academy}}</span></div>
                        <div class="base_11">学历:<span>{{item.degree}}</span></div>
                        <div class="base_11">学位:<span>{{item.professional}}</span></div>                      
                    </div>
                    <div class="base_11">邮箱:<span>{{item.email}}</span></div>
                </div>  
                 
            </div>
            <div class="info">
                    <div class="base_infomation">
                    <div class="base_2">                        
                        <div class="base_22">个人经历</div>
                        <div class="exprence" v-html="exprinence"></div>                     
                    </div> 
                    </div>
                </div>   
      </div>
  </div>
</template>

<script>
import { teacher_detail,imgsrcip } from "@/api/apis";
import '@/assets/js/index.js'
export default {
   data(){   
       return{
         imgSrc:'',
         infomation:{
             name:'aaa',
             age:12
         },
         imgHeight:'',
         exprinence:'',
         loading:'true',
         id:''
       }
   },
   created(){
    //    console.log(this.$route.params)
       this.teacher_de()     
   },
   activated(){
        if(this.id!=JSON.parse(JSON.stringify(this.$route.query))){
            this. teacher_de()
        }
    },
   mounted(){
       this.imgLoad()
       window.addEventListener('resize',()=>{
           this.imgHeight=this.$refs.imgHeight.height
           this.imgLoad();
       },false)
   },
   methods:{
       async teacher_de(){
            let a=JSON.parse(JSON.stringify(this.$route.query))
            this.id=a
           const {data:res}=await teacher_detail(a)
        //    console.log(res.data)
            this.exprinence=res.data[0].experience
            // let b=document.querySelector('.exprence')
            // b.innerHTML=this.exprinence
            
             res.data.forEach(item => {
                 item.avatar=imgsrcip+item.avatar
             });
             this.infomation=res.data
            // console.log(this.infomation)
            this.loading=false
            
       },   
       imgLoad(){
           this.imgHeight=this.$refs.imgHeight.height
       }   
   }

}
</script>

<style lang="less" scoped>
.total{
    font-size: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
}
.bgimg img{
    z-index: -99;
    position: absolute;
    width: 100%;
}
.box{
    width: 70%;
    background-color: #fff;
    margin: 0 auto;
     padding-bottom: 1.25rem;
     .content1{
        //  height: 200px;
         overflow: hidden;
     }
    .content1 img{
        width: 100%;
    }
    .info{
        position: relative;
        img{
            position: absolute;
            width: 1.4rem;
            top:-1.25rem;
            left: 0.375rem;
        }
         .box1{
             position: absolute;
             top:-1.5rem;
            left: 3rem;
            color: #fff;
            font-size: 40px;
            .person{
                margin-top: .1rem;
                font-size: .3rem;
            }
        }
        .base_infomation{
            padding-top: 1rem;
            width: 95%;
            margin: 0 auto;
            .base{
                font-size: 24px;
                font-weight: 300;
            }
            .base_11{
                height: .5rem;
                line-height: .5rem;
                padding-left: 1.9rem;
                font-size: 16px;
                font-weight: 500;
                 span{
                       font-weight: 100;
                       padding-left: .3rem;
                   }
            }
            .base_1{
                display: flex;
                flex-wrap: wrap;
                font-size: 24px;
                font-weight: 500;
                .base_11{
                    width: 3rem;
                    height: .5rem;
                    line-height: .5rem;
                   padding-left: 1.9rem;
                    span{
                       font-weight: 100;
                       padding-left: .3rem;
                   }

                }
                
            }
            .base_2{
                font-size:24px ;
                 font-weight: 300;
                 margin-top: 30px;
                 .base_22{     
                 }
                 .exprence{
                        padding:.1rem 0 0 .5rem;
                        font-size: 20px;
                        font-weight: 100;

                        /deep/ img{
                            margin-left: 1.25rem;
                            width: 7.5rem;
                        }
                    }
            }
        }
        
    }
}
</style>